<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>定时任务管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<div class="layui-form-item"></div>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">任务ID</label>
        <div class="layui-input-inline">
            <input type="text" name="jobName" required  lay-verify="required" placeholder="可模糊搜索" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">任务描述</label>
        <div class="layui-input-inline">
            <input type="text" name="jobDesc" required  lay-verify="required" placeholder="可模糊搜索" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">是否成功</label>
        <div class="layui-input-inline">
            <select name="isSuccess" lay-verify="required">
                <option value=""></option>
                <option value="true">成功</option>
                <option value="false">失败</option>
            </select>
        </div>
        <label class="layui-form-label">是否启用</label>
        <div class="layui-input-inline">
            <select name="enable" lay-verify="required">
                <option value=""></option>
                <option value="true">启用</option>
                <option value="false">停用</option>
            </select>
        </div>
        <button type="button" class="layui-btn layui-btn-normal" onclick="search()">搜索</button>
        <button type="reset" class="layui-btn layui-btn-normal">重置</button>
    </div>
</form>
<table class="layui-hide" id="quartz" lay-filter="quartz"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <span class="layui-btn layui-btn-sm">本应用所有的定时任务一览表</span>
    </div>
</script>

<script type="text/html" id="barDemo">
    <input type="checkbox" name="enable" value="{{d.jobName}}" lay-skin="switch"
           lay-text="启用|停用" lay-filter="enable" {{ d.enable == true ? 'checked' : '' }}>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="start">立即启动</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" target="_blank"
       href="./logPage?key={{d.jobName}}&xAuthToken=${xAuthToken}">运行日志</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs"
       href="javascirpt:void(0);" onclick="openRescheduleDialog('{{d.jobName}}')" lay-event="cron">修改cron</a>
</script>


<script src="../layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
    var tableRender = null;
    layui.use(['jquery', 'table'], function(){
        var table = layui.table;
        var form = layui.form;
        var jQuery = layui.$ //重点处

        tableRender = table.render({
            elem: '#quartz'
            ,url:'./listQuartz?xAuthToken=${xAuthToken}'
            ,toolbar: '#toolbarDemo'
            ,title: '本应用所有的定时任务一览表'
            ,page: true
            ,cols: [[
                {field:'jobName', title:'任务ID', width: 300, sort: true}
                ,{field:'cron', title:'定时时间Cron', width: 150}
                ,{field:'created', title:'最近运行时间', width: 200, sort: true}
                ,{field:'spendTime', title:'执行时间(单位秒)', width:150, sort: true}
                ,{field:'runningState', title:'是否成功运行', width:150, templet: function(res){
                        if(res.runningState==null||typeof(res.runningState) == undefined) return '';
                        return res.runningState ? '成功' : '失败';
                }, sort: true}
                ,{field:'jobDesc', title:'任务描述'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:300}
            ]],
            done: function (res, curr, count) {// 表格渲染完成之后的回调
                for (var i=0;i<res.data.length;i++){//遍历返回数据
                    if(res.data[i].runningState!=null && typeof(res.runningState) != undefined
                        && !res.data[i].runningState){
                        jQuery("table tbody tr").eq(i).css('background-color','pink')    //改变满足条件行的颜色
                    }
                }
            }// end done
        });

        //监听行工具事件
        table.on('tool(quartz)', function(obj){
            var jobKey = obj.data.jobName;
            //console.log(obj)
            if(obj.event === 'start'){
                layer.confirm('会有重复触发问题,确定直接启动？', function(index) {
                    jQuery.get("./start?key=" + jobKey + "&xAuthToken=${xAuthToken}", function (data, status) {
                        if (data.code == "1") {
                            layer.msg(jobKey + ' 启动成功，开始执行');
                        } else {
                            layer.msg(jobKey + ' 失败, error: ' + data.msg);
                        }
                    });
                });
            }
        });

        //监听启用禁用操作
        form.on('switch(enable)', function(obj){
            var that = this;
            <#--layer.msg(this.value + ' ' + this.name + '：'+ obj.elem.checked);-->
            if(obj.elem.checked){
                jQuery.get("./enableJob?key=" + this.value + "&xAuthToken=${xAuthToken}", function (data, status) {
                    if (data.code == "1") {
                        layer.msg(that.value + ' 启用成功，开始执行');
                    } else {
                        layer.msg(that.value + ' 启用失败, error: ' + data.msg);
                        tableRender.reload();
                    }
                });
            }else{
                jQuery.get("./disableJob?key=" + this.value + "&xAuthToken=${xAuthToken}", function (data, status) {
                    if (data.code == "1") {
                        layer.msg(that.value + ' 禁用成功');
                    } else {
                        layer.msg(that.value + ' 禁用失败, error: ' + data.msg);
                        tableRender.reload();
                    }
                });
            }
        });
    });
    
    function search() {
        var jQuery = layui.$;
        var enable = jQuery("[name='enable']").val();
        var isSuccess = jQuery("[name='isSuccess']").val();
        var jobName = jQuery("[name='jobName']").val();
        var jobDesc = jQuery("[name='jobDesc']").val();
        tableRender.reload({
            url: './listQuartz?xAuthToken=${xAuthToken}&enable='+enable+'&isSuccess='+isSuccess+'&jobName='+jobName+'&jobDesc='+jobDesc
        });
    }

    document.onkeydown = function (e) { // 回车提交表单
        // 兼容FF和IE和Opera
        var theEvent = window.event || e;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13) {
            search();
        }
    }

    //重新修改定时任务频率
    function openRescheduleDialog(jobKey){
        var jQuery = layui.$;
        layer.open({
            id:1,
            type: 1,
            title:'修改cron,谨慎操作',
            skin:'layui-layer-rim',
            area:['450px', 'auto'],

            content: ' <div class="row" style="width: 420px;  margin-left:7px; margin-top:10px;">'
                +'<div class="layui-col-md12">'
                +'<div class="input-group">'
                +'<span class="input-group-addon">cron表达式:</span>'
                +'<input id="newCron" type="text" class="layui-input" placeholder="请输入cron表达式">'
                +'</div>'
                +'</div>'
                +'</div>'
            ,
            btn:['保存','取消'],
            btn1: function (index,layero) {
                var cron = jQuery("#newCron").val();
                jQuery.get("./reschedule?key=" + jobKey + "&xAuthToken=${xAuthToken}" + "&cron="+cron, function (data, status) {
                    if (data.code == "1") {
                        layer.msg(jobKey + ' cron修改成功');
                        tableRender.reload();
                        layer.close(index);
                    } else {
                        layer.msg(jobKey + ' cron修改, error: ' + data.msg);
                    }
                });
            },
            btn2:function (index,layero) {
                layer.close(index);
            }

        });
    }
</script>

</body>
</html>